<template>
  <div class="container">
    <div class="cheader2">
      <van-icon
        @click="goBack"
        class="chl"
        name="arrow-left"
        color="#000"
        size="20"
      />
      <div class="chtitle">购买燃油包</div>
      <div class="djbox"></div>
    </div>
    <div class="mbox">
      <div
        class="mli"
        v-for="item in liList"
        :key="item.id"
        @click="handlePay(item.id)"
      >
        <div class="mfont">
          <div class="m0">{{item.name}}</div>
          <div class="m1">+{{item.fuelQuantity}}<span>燃油币</span></div>
          <div class="m2">-{{item.capitalPrice}}<span>USDT</span></div>
        </div>
        <div class="m3">立即购买</div>
      </div>
    </div>
    <!-- <div class="btn" @click="handleSubmit">确认充值</div> -->
  </div>
</template>
  
  <script setup lang='ts'>
import { reactive, computed, onMounted, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "@/store";
import { Toast, Dialog } from "vant";
import http from "@/utils/http";
const route = useRoute();
const router = useRouter();
const store = useStore();
const liList = ref<any[]>([]);
const walletInfo = computed(() => store.state.users.wallet);
onMounted(() => {
  getList();
});
const getList = () => {
  http.get("user/fuel_set_meal/option").then((res: any) => {
    if (res.code === 0) {
      liList.value = res.data;
    }
  });
};
const handlePay = (id: string) => {
  Dialog({
    title: "提示",
    showCancelButton: true,
    message: "确定购买燃油包?",
  })
    .then(() => {
      http
        .post("user/transfer_detailed", {
          fuelSetMealId: id,
          currency: "USDT"
        })
        .then((res: any) => {
          if (res.code === 0) {
            Toast("购买成功");
            setTimeout(() => {
              goBack();
            }, 1000);
          }
        });
    })
    .catch(() => {
      // on cancel
    });
};
const goBack = () => {
  router.go(-1);
};
</script>
  
  <style lang="scss" scoped>
.cheader2 {
  z-index: 1001;
  width: 100%;
  height: 45px;
  background-color: #fff;
  font-size: 16px;
  color: #000;
  position: fixed;
  top: 0;
  left: 0;

  .chl {
    position: absolute;
    left: 16px;
    top: 50%;
    text-align: center;
    transform: translateY(-50%);
  }
  .chtitle {
    position: absolute;
    left: 50%;
    top: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
  }
  .djbox {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    img {
      width: 16px;
      margin-right: 4px;
    }
    div {
      font-size: 13px;
      color: #878b97;
    }
  }
}
.mbox {
  margin-top: 45px;
  padding: 10px 14px 0;

  .mli {
    width: 100%;
    height: 130px;
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 10px;
    background: url("@/assets/images/yhq.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
    .mfont {
      height: 84px;
      position: absolute;
      top: 50%;
      left: 30px;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .m1 {
      font-size: 34px;
      font-weight: 600;
      color:#fff;
      span {
        font-size: 13px;
      }
    }
    .m0 {
      font-size: 14px;
      color: #412301;
      font-weight: 600;
    }
    .m2 {
      font-size: 20px;
      color: #a41010;
      font-weight: 600;
      span {
        font-size: 12px;
      }
    }
    .m3 {
      font-size: 14px;
      position: absolute;
      top: 50%;
      right: 24px;
      line-height: 18px;
      word-wrap: break-word;
      transform: translateY(-50%);
      width: 20px;
      color: #fff;
      font-weight: 600;
      span {
        font-size: 13px;
      }
    }
  }
}
.btn {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
  background: #36b4ea;
  border-radius: 3px;
  width: calc(100% - 40px);
  margin:40px auto;
}
</style>